<template>
  <view>
    <view class="max_box">
      <view class="message_box">
        <view class="left_box">
          <view class="title">{{ title }}</view>
          <view class="subheading">{{ subTitle }}</view>
        </view>
        <view class="right_box">
          <view class="iconfont icon_font">&#xe675;</view>
        </view>
      </view>
      <!-- 详情 -->
      <view class="info_box">
        <navigator
          url="/pages/index"
          open-type="switchTab"
          class="absolute iconfont icon_font"
          >&#xe60c;</navigator
        >
        <slot></slot>
      </view>
    </view>
    <view class="button-sp-area">
      <button type="warn" size="mini" @click="cancelBooked" plain="true">
        全部预约
      </button>
      <button type="warn" size="mini" @click="toNavigation">导航到店</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    subTitle: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      appoiInfo: {},
    }
  },
  onLoad(option) {},
  methods: {
    cancelBooked() {
      this.$emit('cancelBooked')
    },
    toNavigation() {
      this.$emit('toNavigation')
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #f1f1f1;
}
</style>
<style lang="scss" scoped>
.max_box {
  .message_box,
  .info_box {
    background: #fff;
    margin-bottom: 30rpx;
    padding: 60rpx 40rpx;
    position: relative;
    overflow: hidden;
    .left_box {
      float: left;
      .title {
        font-size: 42rpx;
        font-weight: 600;
        color: #333;
        padding-bottom: 6rpx;
      }
      .subheading {
        font-size: 26rpx;
        color: #9a9a9a;
      }
    }
    .right_box {
      float: right;
      .icon_font {
        font-size: 90rpx;
        color: #cc1d3a;
      }
    }
  }
  .info_box {
    padding: 24rpx 40rpx 50rpx;
  }
  .absolute {
    width: 80rpx;
    height: 80rpx;
    font-size: 36rpx;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 200rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 26rpx;
    bottom: 30rpx;
  }
}

.button-sp-area {
  padding: 40rpx;
  overflow: hidden;

  button {
    width: 45%;
    height: 88rpx;
    line-height: 86rpx;
    font-size: 30rpx;
    float: left;
    background: #fff;
    color: #cc1d3a;
    border: 2rpx solid #cc1d3a;

    &:last-of-type {
      float: right;
      background: #cc1d3a;
      color: #fff;
      border: 2rpx solid #cc1d3a;
    }
  }
}
</style>
